<template>
	<div class="betting-analysis-legend">
		<div class="betting-analysis-legend__item home">
			<base-icon class="icon" :name="type === BettingType.ou ? 'over' : 'jersey'"></base-icon>
			<span class="name">{{ data.left }}</span>
		</div>
		<!-- <div class="betting-analysis-legend__item draw">
      <span class="name">{{ data.center }}</span>
    </div> -->
		<div class="betting-analysis-legend__item away">
			<span class="name">{{ data.right }}</span>
			<base-icon class="icon" :name="type === BettingType.ou ? 'under' : 'jersey'"></base-icon>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { BettingType } from '@/enums'
import { BaseIcon } from '@/components/base'
defineProps({
	data: {
		type: Object,
		required: true
	},
	type: {
		type: String as PropType<BettingType>,
		required: true
	}
})
</script>
<style lang="scss" scoped>
.betting-analysis-legend {
	margin: 0 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0 5px;
	border-bottom: 1px solid var(--color-border-1);
	&__item {
		display: flex;
		align-items: center;
		.icon {
			font-size: 14px;
		}
		.name {
			font-size: 12px;
			color: var(--color-text-2);
		}
		&.home {
			.icon {
				margin-right: 3px;
				color: var(--color-home);
			}
		}
		&.away {
			.icon {
				margin-left: 3px;
				color: var(--color-away);
			}
		}
		&.draw {
			.name {
				color: var(--color-text-3);
			}
		}
	}
}
</style>
